<template>
  <view class="stock-page">
    <view class="card" v-for="(item) in 3">
      <view>
        <view>
          <image src="/static/logo.png"/>
          <u-tag type="success">已使用</u-tag>
        </view>
        <view>
          <span>123</span>
          <view>
            <span>耗材分类</span>
            <span>笔记本</span>
          </view>
          <view>
            <span>商品条码</span>
            <span>123123</span>
          </view>
          <view>
            <span>包装条码</span>
            <span>123123</span>
          </view>
        </view>
      </view>
      <u-line/>
      <view>
        <view>
          <span>仓库名称</span>
          <span>东莞仓库</span>
        </view>
        <view>
          <span>库位名称</span>
          <span>东莞-食品仓</span>
        </view>
        <view>
          <span>规格型号</span>
          <span>规格型号</span>
        </view>
        <view>
          <span>库存单位</span>
          <span>库存单位</span>
        </view>
        <view>
          <span>包装规格</span>
          <span>包装规格</span>
        </view>
        <view>
          <span>供应商</span>
          <span>供应商</span>
        </view>
        <view>
          <span>品牌</span>
          <span>品牌</span>
        </view>
        <view>
          <span>应盘数量</span>
          <span>3</span>
        </view>
        <view>
          <span>实盘数量</span>
          <view>
            <up-input value="3"/>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>

</script>

<style scoped lang="scss">
.stock-page {
  width: 100%;

  .card {
    margin: 0 20rpx 20rpx 20rpx;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    display: flex;
    flex-direction: column;

    &:first-child {
      margin-top: 20rpx;
    }

    > view:first-child {
      display: flex;
      margin-bottom: 10rpx;

      > view:first-child {
        position: relative;

        image {
          height: 200rpx;
          width: 200rpx;
        }

        :deep(.u-transition.u-fade-enter-to.u-fade-enter-active) {
          position: absolute;
          top: 0;
          right: 0;
          transform: translate(20%, -40%);
        }
      }

      > view:last-child {
        padding-left: 40rpx;
        width: calc(100% - 200rpx);
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #b7b7b9;

        > * {
          padding: 5rpx 0;
        }

        > span {
          color: black;
        }

        > view > span:first-child {
          font-size: .8rem;
        }

        > view > span:last-child {
          font-size: .9rem;
          margin-left: 20rpx;
          color: black;
        }
      }
    }

    > view:last-child {
      display: flex;
      flex-direction: column;
      margin-top: 10rpx;

      > * {
        padding: 10rpx 0;
      }

      > view {
        display: flex;
        align-items: center;

        > span:first-child {
          color: #b7b7b9;
          font-size: .8rem;
        }

        > span:last-child {
          color: black;
          font-size: .9rem;
          margin-left: 20rpx;
        }

        &:last-child > span:first-child {
          color: #F56C6C;
        }

        > view {
          width: 40%;
          margin-left: 20rpx;

          > :deep(.u-input.u-border.u-input--radius.u-input--square) {
            padding: 0 10rpx !important;
          }

        }
      }
    }
  }
}
</style>